Let鈥檚 Make a Vue

Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For something like that, it might be natural to reach for a plugin, or even an embedded Google Calendar, but it鈥檚 actually a lot more straightforward to make one than you might think. Especially when we use the component-driven power of Vue. I鈥檝e set up a demo over at CodeSandbox so you can see what we鈥檙e aiming for, but it鈥檚 always a good idea to spell out what we鈥檙e trying to do: Create a month view grid that displays the days of the current monthDisplay dates from the previous and next months to so the grid is always fullIndicate the current dateShow the name of the currently selected monthNavigate to the previous and next monthAllow the user to navigate back to the current month with a single click Oh, and we鈥檒l build this as a single page application that fetches calendar dates from Day.js, a super light utility library. Step 1: Start with the basic markup We鈥檙e going to jump straight into templates. If you鈥檙e new to Vue, Sarah鈥檚 introduction series is a nice place to start. It鈥檚 also worth noting that I鈥檒l be linking to the Vue 2 docs throughout this post. Vue 3 is currently in beta and the docs for it are subject to change. Let鈥檚 start with creating a basic template for our calendar. We can outline our markup as three layers where we have: A section for the calendar header. This will show components with the currently selected month and the elements responsible for paginating between months.A section for the calendar grid header. A table header that holds a list containing the days of the week, starting with Monday.The calendar grid. You know, each day in the current month, represented as a square in the grid. Let鈥檚 write this up in a file called CalendarMonth.vue. This will be our main component. 聽 聽 聽 聽聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 …

Read the rest Let鈥檚 Make a Vue-Powered Monthly Calendar

Read at the original Source: css tricks.